<template>
	<div class="basicsBox">
		<div class="operateBox">
			<div class="operateDiv">
				<p class="operateText"><sup>*</sup>领取类型:</p>
				<el-select v-model="receiveType" placeholder="请选择领取类型" :disabled="isFirst">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" >
					</el-option>
				</el-select>
				<span class="checkTxt" v-show="diffReceiveType" v-text="diffText" style="right:44%"></span>
			</div>
			<div class="operateDiv">
				<p class="operateText"><sup>*</sup>活动场景:</p>
				<el-select v-model="activityScenes" placeholder="请选择活动场景">
					<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled">
					</el-option>
				</el-select>
				<span class="checkTxt" v-show="diffActivityScenes" v-text="diffText" style="right:44%"></span>
			</div>
			<div class="operateDiv">
				<p class="operateText"><sup>*</sup>活动开始时间:</p>
				<el-date-picker v-model="startTime" type="datetime" placeholder="选择日期时间" align="right" class="timeInput" :picker-options="pickerOptions1" value-format="yyyy-MM-dd HH:mm:ss" @change="startTimeChang">
				</el-date-picker>
				<span class="checkTxt" v-show="diffStartTime" v-text="diffText" style="right:44%"></span>
			</div>
			<div class="operateDiv">
				<p class="operateText"><sup>*</sup>活动结束时间:</p>
				<el-date-picker v-model="endTime" type="datetime" placeholder="选择日期时间" align="right" class="timeInput" :picker-options="pickerOptions1" value-format="yyyy-MM-dd HH:mm:ss">
				</el-date-picker>
				<span class="checkTxt" v-show="diffEndTime" v-text="diffText" style="right:44%"></span>
			</div>
			<div class="operateDiv" style="align-items:flex-start;margin-bottom:.04rem">
				<p class="operateText"><sup>*</sup>活动开放日期:</p>
				<div class="styleDiv">
					<el-radio v-model="radio1" label="1" >活动起止时间内全时间段</el-radio><br>
					<el-radio v-model="radio1" label="2">定期</el-radio>每月 
					<div class="monthPerDay" @click="showPerDayBox">
						<el-input placeholder="请选择日期" v-model="monthPerDay" disabled></el-input><i class="el-icon-date" style="right:3%;top:32%;position: absolute;cursor:pointer"></i>
					</div>
					<div class="perDayBox" v-show="showPerDay">
						<el-checkbox-group v-model="listDays" class="checkboxGroup">
							<el-checkbox-button v-for="item in 31" :label="item.toString().length == 1?('0'+item):item" :key="item"></el-checkbox-button>
						</el-checkbox-group>
						<div class="btnsBox">
							<div class="btn next" @click="selectPerDay(0)">取消</div>
							<div class="btn save" @click="selectPerDay(1)">确认</div>
						</div>
					</div>
					<br>
					<el-radio v-model="radio1" label="3">重复</el-radio>
					<div class="choseDay">
						<el-checkbox-group v-model="checkList">
							<el-checkbox label="星期一" :disabled="isCheckDisabled"></el-checkbox>
							<el-checkbox label="星期二" :disabled="isCheckDisabled"></el-checkbox>
							<el-checkbox label="星期三" :disabled="isCheckDisabled"></el-checkbox>
							<el-checkbox label="星期四" :disabled="isCheckDisabled"></el-checkbox><br>
							<el-checkbox label="星期五" :disabled="isCheckDisabled"></el-checkbox>
							<el-checkbox label="星期六" :disabled="isCheckDisabled"></el-checkbox>
							<el-checkbox label="星期日" :disabled="isCheckDisabled"></el-checkbox>
						</el-checkbox-group>
					</div>
					<span class="checkTxt" v-show="diffRadio1" v-text="diffText" style="right:10%;top:28%"></span>
				</div>
			</div>
			<div class="operateDiv">
				<p class="operateText"><sup>*</sup>活动开放时间:</p>
				<el-radio v-model="radio2" label="1">活动起止时间内全时间段</el-radio>
				<el-radio v-model="radio2" label="2">限定日期段</el-radio>
				<el-time-picker 
					:disabled="isSelectTimePicker"
					format="HH:mm"
					value-format="HH:mm"
					is-range 
					v-model="timerpicker" 
					range-separator="~" 
					start-placeholder="开始时间" 
					end-placeholder="结束时间" 
					>
				</el-time-picker>
				<span class="checkTxt" v-show="diffTime" v-text="diffText" style="right:-9%;top:22%"></span>
			</div>
			<div class="btns">
				<div class="pageBtn btn next" @click="goRules(-1)">上一步</div>
				<div class="pageBtn btn save" @click="goRules(0)">保存</div>
				<div class="pageBtn btn next" @click="goRules(1)">下一步</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Step from '_components/Step'
	import { time } from '_config/common.js'
	import {SAVE_OR_EDIT_BASIS,FIND_BASIS_BY_CODE} from '@/config/url'
	import Bus from '@/bus.js'
	
	export default {
		components:{
			Step
		},
		data() {
			return {
				pickerOptions: time,
				pickerOptions1: {
					disabledDate(time) {
						return time.getTime() < Date.now() - 8.64e7;
					}
				},
				radio1: '1',//活动开放日期
				radio2: '1',
				listDays:[],
				options: [
					{
						value: '993025',
						label: '领取奖项'
					}, {
						value: '993024',
						label: '抽取奖项'
					}, {
						value: '993023',
						label: '折扣优惠'
					},{
						value: '993022',
						label: '返现'
					}, 
				],
				isDiscout:false,//是否选择折扣
				activityCode:sessionStorage.getItem('activityCode'),//活动code
				receiveType:'993025',//领取类型：993023 打折，993024 抽取，993025 领取
				activityScenes:'994004',//活动场景：994001 注册，994002 充值， 994003 充电，994004 页面，994005 分享（待定）
				startTime:null,//活动开始时间
				endTime:null,//活动结束时间
				activityCycleDate:'0',//活动开放周期（天/月）,0全时段
				activityCycleWeek:'0',//活动开放周期（星期/周），0 全时段
				activityCycleTime:null,//活动开放时间（时间/天），0 全天
				timerpicker:null,//时间选择
				repeatRecord:sessionStorage.getItem('repeatRecord'),//活动复录：0 初录，1 复录
				monthPerDay:null,//每月选择天数
				showPerDay:false,//显示每月选择天数
				isCheckDisabled:true,//是否可以选择星期
				isSelectDay:false,//是否可以选择日子
				isSelectTimePicker:true,//是否可以选择时间选择器
				checkList:[],//选中的星期
				clickNext:false,//是否点击下一步
				diffText:'与初录不一致',
				repeatRecordContent:null,
				diffReceiveType:false,
				diffActivityScenes:false,
				diffStartTime:false,
				diffEndTime:false,
				diffRadio1:false,
				diffTime:false,
				isIdentical:null,//0 一致，1 不一致
				isFirst:sessionStorage.getItem('repeatRecord') == '1'
			}
		},
		created(){
		},
		mounted(){
			this.getFirstData()
		},
		watch:{
			timerpicker(val){
				this.diffTime = this.repeatRecord == 1 && this.repeatRecordContent && val.toString() != this.repeatRecordContent.activityCycleTime
			},
			radio1(val){
				this.isCheckDisabled = true
				this.isSelectDay = false
				this.isSelectTimePicker = true
				// this.listDays = []
				// this.checkList = []
				$('.el-input.is-disabled .el-input__inner').css('backgroundColor','#F5F7FA')
				if(val == 2){
					this.isSelectDay = true
					this.activityCycleWeek = '0'
					this.checkList = []
					$('.el-input.is-disabled .el-input__inner').css('backgroundColor','#fff')
				}else if(val == 3){
					this.isCheckDisabled = false
					this.activityCycleDate = '0'
					// this.checkList = []
					this.showPerDay = false
					this.monthPerDay = ''
				}else{
					this.showPerDay = false
					this.activityCycleDate = '0'
					this.activityCycleWeek = '0'
					this.checkList = []
					this.listDays = []
					this.monthPerDay = ''
				}
			},
			radio2(val){
				this.isSelectTimePicker = true
				if(val == 2){
					this.isSelectTimePicker = false
					this.activityCycleTime = ''
				}else{
					this.timerpicker = '0'
					this.activityCycleTime = '0'
				}
			},
			receiveType(val){
				if(val == 993023){
					this.isDiscout = true
					this.activityScenes = '994003'
				}else{
					this.isDiscout = false
				}
				this.diffReceiveType = this.repeatRecord == 1 && this.repeatRecordContent && val != this.repeatRecordContent.receiveType?true:false
			},
			activityScenes(val){
				this.diffActivityScenes = this.repeatRecord == 1 && this.repeatRecordContent && val != this.repeatRecordContent.activityScenes?true:false
			},
			startTime(val){
				let start = new Date(val).getTime()
				let end = new Date(this.endTime).getTime()
				if(end){
					if(end <= start){
						this.endTime = ''
						this.$message({
							message: '开始时间要小于结束时间',
							type: 'warning'
						});
					}	
				}
				if(this.repeatRecord == 1){
					this.diffStartTime = this.repeatRecord == 1 && this.repeatRecordContent && val != this.repeatRecordContent.startTime?true:false
				}
			},
			endTime(val){
				let start = new Date(this.startTime).getTime()
				let end = new Date(val).getTime()
				if(end <= start){
					this.endTime = ''
					this.$message({
						message: '结束时间要大于开始时间',
						type: 'warning'
					});
				}else{
					this.diffEndTime = this.repeatRecord == 1 && this.repeatRecordContent && val != this.repeatRecordContent.endTime?true:false
				}
			},
			monthPerDay(val){
				this.diffRadio1 = this.repeatRecord == 1 && this.repeatRecordContent && val.toString() != this.repeatRecordContent.activityCycleDate
			},
			listDays(val){
				let arr = [...val]
				arr = arr.sort()
				this.diffRadio1 = this.repeatRecord == 1 && this.repeatRecordContent && arr.toString() != this.repeatRecordContent.activityCycleDate
			},
			checkList(val){
				let arr = [...val]
				arr = arr.sort()
				this.diffRadio1 = this.repeatRecord == 1 && this.repeatRecordContent && arr.toString() != this.repeatRecordContent.activityCycleWeek
			},
			activityCycleTime(val){
				this.diffTime = this.repeatRecord == 1 && this.repeatRecordContent && val.toString() != this.repeatRecordContent.activityCycleTime
			}
		},
		methods: {
			startTimeChang() {
				if(this.repeatRecord == 1){}else{
					var timestamp=new Date().getTime()
					let start = new Date(this.startTime).getTime()
					if(timestamp > start){
						this.startTime = ''
						this.$message({
							message: '开始时间要大于当前时间',
							type: 'warning'
						});
					}
				}
			},
			getFirstData(){
				this.$fetch(FIND_BASIS_BY_CODE,
					{
						"activityCode":this.activityCode,
						'repeatRecord':'0',
					},
				)
				.then(res=>{
					if(res.status == 1){
						this.repeatRecordContent = res.data

						if(res.data){
							if(this.repeatRecord == 0){
								this.updateData(res.data)
							}else{
								this.receiveType = this.repeatRecordContent.receiveType
								if(res.data.receiveType != '993025'){
									this.diffReceiveType = true
								}
								if(res.data.activityScenes != '994004'){
									this.diffActivityScenes = true
								}
								if(res.data.activityCycleDate == '0'&& res.data.activityCycleWeek == '0'){
									this.diffRadio1 = false
								}else{
									this.diffRadio1 = true
								}
								if(res.data.activityCycleTime != '0'){
									this.diffTime = true
								}
								this.getSecData()
							}
						}
					}else{
						this.$message({
							message: '获取失败',
							type: 'warning'
						});
					}
				})
				.catch((err)=>{
					console.log(err)
					this.$message({
						message: '获取初录基础设置数据异常',
						type: 'warning'
					});
				})
			},
			getSecData(){
				this.$fetch(FIND_BASIS_BY_CODE,
					{
						"activityCode":this.activityCode,
						'repeatRecord':'1',
					},
				)
				.then(res=>{
					if(res.status == 1){
						let data = res.data
						if(data && this.repeatRecord == 1){
							this.updateData(data)							
						}
					}else{
						this.$message({
							message: '获取复录基础设置数据失败',
							type: 'warning'
						});
					}
				})
				.catch((err)=>{
					console.log(err)
					this.$message({
						message: '获取复录基础设置数据异常',
						type: 'warning'
					});
				})
			},
			updateData(data){
				this.receiveType = this.repeatRecordContent.receiveType
				this.activityScenes = data.activityScenes
				this.startTime = data.startTime
				this.endTime = data.endTime

				if(data.activityCycleDate == '0' && (data.activityCycleWeek == '0' || data.activityCycleWeek == '')){
					this.radio1 = '1'
				}else if(data.activityCycleDate != '0' && (data.activityCycleWeek == null || data.activityCycleWeek == '')){
					this.radio1 = '2'
					this.monthPerDay = data.activityCycleDate
					this.listDays = data.activityCycleDate && data.activityCycleDate.split(',')
				}else if((data.activityCycleDate == null || data.activityCycleDate == '0') && data.activityCycleWeek != '0'){
					this.radio1 = '3'
					this.checkList = data.activityCycleWeek.split(',')
				}

				if(data.activityCycleTime == '0'){
					this.radio2 = '1'
				}else{
					this.radio2 = '2'
					this.timerpicker = data.activityCycleTime.split(',')
				}
			},
			showPerDayBox(){
				if(this.isSelectDay){
					this.showPerDay = !this.showPerDay
				}
			},
			selectPerDay(type){
				if(type == 1){
					let arr = [...this.listDays]
					this.activityCycleDate = arr.sort().toString()
					this.monthPerDay = arr.sort().toString()
				}
				this.showPerDay = false
			},
			goRules(type) {
				if(type == -1){
					this.$router.push('/settingIndex/newActivities')
					Bus.$emit('changeStep')
				}else{
					let that = this
	
					if(this.radio1 == 1){
						this.activityCycleDate = '0'
						this.activityCycleWeek = '0'
					}else if(this.radio1 == 2){
						this.activityCycleWeek = '0'
						if(!this.monthPerDay){
							this.$message({
								message: '必填项不能为空',
								type: 'error'
							});
							return;
						}
						this.activityCycleDate = this.monthPerDay && this.monthPerDay.toString()
					}else if(this.radio1 == 3){
						this.activityCycleDate = '0'
						if(this.checkList.length < 1){
							this.$message({
								message: '必填项不能为空',
								type: 'error'
							});
							return;
						}
						let arr = [...this.checkList]
						this.activityCycleWeek = arr.sort().toString()
					}
	
					if(this.radio2 == 1){
						this.activityCycleTime = '0'
					}else{
						if(!this.timerpicker){
							this.$message({
								message: '必填项不能为空',
								type: 'error'
							});
							return;
						}
						this.activityCycleTime = this.timerpicker.toString()
					}
					if(this.startTime && this.endTime){
						if(this.repeatRecord == 0){
							this.isIdentical = 0
						}else{
							if(this.diffReceiveType || this.diffActivityScenes || this.diffStartTime || this.diffEndTime || this.diffRadio1 || this.diffTime){
								this.isIdentical = 1
							}else{
								this.isIdentical = 0
							}
						}
						this.$post(SAVE_OR_EDIT_BASIS,
							{
							"activityCode":sessionStorage.getItem('activityCode'),
							'receiveType':this.receiveType,
							'activityScenes':this.activityScenes,
							'startTime':this.startTime,
							'endTime':this.endTime,
							'activityCycleDate':this.activityCycleDate,
							'activityCycleWeek':this.activityCycleWeek,
							'activityCycleTime':this.activityCycleTime,
							'repeatRecord':this.repeatRecord,
							'isIdentical':this.isIdentical
							},
						)
						.then(res=>{
							if(res.status == 1){
								this.$message({
									message: '保存成功',
									type: 'success'
								});
								sessionStorage.setItem('receiveType',this.receiveType)
								sessionStorage.setItem('activityScenes',this.activityScenes)
								if(type == 1){
									that.clickNext = true
									
									if(that.receiveType == 993025 || that.receiveType == 993024) {
										that.$router.push('/settingIndex/newRules')
									}else if(that.receiveType == 993023){
										that.$router.push('/settingIndex/newRulesSale')
									}else if(that.receiveType == 993022){
										that.$router.push('/settingIndex/newRuleCashback')
									}
									Bus.$emit('changeStep')
								}
							}else{
								this.$message({
									message: '保存失败',
									type: 'warning'
								});
							}
						})
						.catch(err=>{
							console.log(err)
							this.$message({
								message: '保存失败',
								type: 'warning'
							});
						})
		
					}else{
						this.$message({
							message: '必填项不能为空',
							type: 'error'
						});
					}
				}
			},
		},
		computed:{
			options1(){
				return [
					{
						value: '994004',
						label: '页面活动',
						disabled:this.isDiscout
					},
					{
						value: '994001',
						label: '注册',
						disabled:this.isDiscout
					}, {
						value: '994002',
						label: '充值',
						disabled:this.isDiscout
					}, {
						value: '994003',
						label: '充电',
					},
				]
			}
		},
		beforeRouteLeave(to,from,next){
			// if(!this.clickNext){
			// 	if(!this.startTime || !this.endTime){
			// 		next(false)
			// 		this.$message({
			// 			message: '请先完成当前页面的设置',
			// 			type: 'warning'
			// 		});
			// 	}else{
			// 		Bus.$emit('selectTab',to)
			// 		next()
			// 	}
			// }else{
				next()
			// }
		}
	}
</script>

<style lang="less">
	.basicsBox{
		.operateBox {
			width: 55%;
			margin: auto;
			margin-top: 0.1rem;
			.operateDiv {
				width: 100%;
				margin: auto;
				margin-bottom: 0.15rem;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-left: 0;
				position: relative;
				.checkTxt{
					color: #FF2E2E;
					position: absolute;
					right: -7%;
				}
			}
			
			.operateText {
				text-align: end;
				width: 19%;
				margin-right: 0.08rem;
			}
			
			.styleDiv {
				margin-top: -0.1rem;
			}
			
			.styleDiv .el-radio {
				margin-top: 0.1rem;
			}
			
			.choseDay {
				width: 3.2rem;
				height: 0.8rem;
				border: 1px solid rgba(181, 194, 202, 1);
				border-radius: 8px;
			}
			
			.choseDay .el-checkbox {
				margin-left: 0.14rem;
				margin-top: 0.18rem;
			}
			
			.btns {
				position: fixed;
				bottom:0.15rem;
				left:45%;
			}
			
			.pageBtn {
				width: 0.8rem;
				height: 0.2rem;
				background: #3395FF;
				border-radius: 8px;
				color: #fff;
				margin-left: 0.2rem;
			}
			
			// .next {
			// 	background: #A9D0FF;
			// }
			.monthPerDay{
				display: inline-block;
				width: 24%;
				position: absolute;
				z-index: 2;
				.el-input.is-disabled .el-input__inner{
					cursor: pointer ;
				}
			}
			.perDayBox{
				width: 56%;
				// height: 330px;
				position: absolute;
				z-index: 2;
				border:1px solid rgba(181, 194, 202, 1);
				background-color: #fff;
				.checkboxGroup{
					display:flex;
					flex-direction: row;
					justify-content: flex-start;
					flex-wrap:wrap;
					padding-top: 4px;
					padding-left: 3px;
					padding-right: 3px;
					label{
						margin: 6px 2px;
					}
					.el-checkbox-button__inner{
						border-left: 1px solid #DCDFE6;
					}
				}
				.btnsBox{
					display: flex;
					flex-direction: row;
					margin: 3% 0;
					.btn{
						margin-left: 18%;
						width:22%;
						border: 1px solid #ddd;
					}
					.btn:nth-of-type(2){
						color:#fff;
						background: #3395FF
					}
				}
			}
		}
	}
	
</style>